<template>
    <el-dialog v-model="dialogStore.isDetailDialogVisible" class="pay-service-dialog" append-to-body
        :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="false" top="20vh" width="400px"
        title="功能和服务详情" @closed="onClosed">
        <div class="cell" v-for="item in orderStore.authority" :key="item">
            <img class="select-icon" :src="`${_oss_}images/dialog/select.svg`" />
            {{ item }}
        </div>
        <div class="dialog-footer">
            <div class="agree-text">
                <label>
                    <el-checkbox v-model="isChecked" size="small" />
                    &nbsp;支付即同意</label><el-link type="primary" @click="dialogStore.isBuyTemplateProtocolDialog = true">
                    《购买协议》
                </el-link>
            </div>

            <div class="dialog-footer__end">
                <span class="price">¥{{ orderStore.order_price }}</span>
                <el-button type="primary" size="small" @click="onSubmitPay()">
                    立即购买
                </el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { useContent } from ".";

const { dialogStore, orderStore, isChecked, onSubmitPay, onClosed } =
    useContent();
</script>
<style lang="scss">
.pay-service-dialog {
    background-color: rgba($color: #fff, $alpha: 1) !important;

    .cell {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        line-height: 20px;
        font-size: 14px;
        color: #333;

        .select-icon {
            width: 16px;
            margin-right: 6px;
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .agree-text {
            display: inline-flex;
            align-items: center;
            font-size: 14px;
            user-select: none;

            label {
                display: inline-flex;
                align-items: center;
            }
        }
    }

    .el-dialog__headerbtn {
        top: 0;
    }

    .el-dialog__header {
        padding-top: 15px;

        .el-dialog__title {
            font-size: 16px;
        }
    }

    .el-dialog__body {
        padding: 10px 20px;
    }

    .dialog-footer {
        margin-top: 20px;
        text-align: center;

        &__end {
            display: flex;
            align-items: center;
        }

        .text {
            color: #888;
            cursor: pointer;
            user-select: none;
        }

        .price {
            color: #f00;
            margin-right: 10px;
        }
    }
}
</style>
